<template>
  <div class="detail">
    <div class="goods-detail">
      <div class="detail-scroll">
        <!-- 图片 -->
        <div class="pic">
          <img :src="currentGoods.imgUrl" />
          <van-icon name="arrow-left" size="24" @click="backIndex" />
        </div>
        <!-- 商品描述 -->
        <div class="goods-dsc">
          <div class="info">
            <h3>{{ currentGoods.name }}</h3>
            <p>
              月售{{ currentGoods.sellCount }}份，好评率{{
                currentGoods.rating
              }}%
            </p>
          </div>
          <div class="add-cart">
            <span class="price">￥{{ currentGoods.price }}</span>
            <van-button round type="info" size="small">加入购物车</van-button>
          </div>
        </div>
        <!-- 背景盒子 -->
        <div class="bgc-box"></div>
        <!-- 商品介绍 -->
        <div class="goods-intro">
          <h3>商品介绍</h3>
          <p> {{currentGoods.goodsDesc}} </p>
        </div>
        <!-- 背景盒子 -->
        <div class="bgc-box"></div>
        <!-- 留言分类按钮 -->
        <div class="msg-btn">
          <van-button
            size="small"
            color="linear-gradient(to right, #515f6b, grey)"
            >全部3</van-button
          >
          <van-button size="small" color="#bbb">推荐2</van-button>
          <van-button size="small" color="#bbb">吐槽1</van-button>
        </div>
        <!-- 之查看有内容 -->
        <div class="has-con">
          <van-icon
            name="success"
            size="16"
            @click="onlyText"
            :style="{
              background: flag ? '#f5a113' : '#bbb',
            }"
          />
          <span>只看有内容的评价</span>
        </div>
        <!-- 用户留言 -->
        <div class="user-msg">
          <div class="single-msg" v-for="(item, index) in currentGoods.ratings" :key="index">
            <div class="user-info">
              <div class="date">{{date}}</div>
              <div class="user">
                <span>{{item.username}}</span>
                <img :src="item.avatar" />
              </div>
            </div>
            <p class="detail-msg">{{item.text}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
    <footer class="footer">
      <!-- 左边 -->
      <div class="foo-left">
        <div class="out-circle">
          <div class="in-circle" @click="showPopup">
            <van-icon name="shopping-cart" color="#b5b9c4" size="26" />
          </div>
          <!-- 微标 -->
          <van-badge :content="miniIcon" />
        </div>
        <p class="tip">未选购商品</p>
      </div>
      <!-- 右边 -->
      <div class="foo-right">￥20起送</div>
    </footer>
    <!-- 购物车弹出框 -->
    <van-popup v-model="showbtm" position="bottom" :style="{ height: '30%' }">
      <div class="cart-top">
        <span>已选商品</span>
        <span @click="emptyChoosed">清空</span>
      </div>

      <div class="add-goods" v-for="(item, index) in choosedGoods" :key="index">
        <h3>{{ item.name }}</h3>
        <span>￥{{ item.price }}</span>
        <van-stepper
          v-model="item.goodsCount"
          theme="round"
          button-size="18"
          disable-input
          min="0"
          step
          async-change
          @plus="add(item.id)"
          @minus="reduce(item.id)"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import BScroll from "@better-scroll/core";
// import local from '@/utils/local';
import moment from 'moment';

export default {
  data() {
    return {
      flag: false,
      curGoods: {}, // 当前商品信息
      miniIcon: 0,
      showbtm: false, // 购物车弹窗状态
      choosedGoods: [],
    };
  },
  methods: {
    // 退回首页
    backIndex() {
      this.$router.push("/index");
    },
    // 购物车显示状态
    showPopup() {
      this.showbtm = !this.showbtm;
    },
    // 清空购物车
    emptyChoosed() {},
    // 只查看有内容
    onlyText() {},
    ...mapMutations(["getCurrentGoods"]),
  },
  computed: {
    ...mapState(["currentGoods"]),
    ...mapGetters(["newAllGoods"]),
    // 转换时间格式
    date() {
      return moment(this.currentGoods.ctime).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  created() {
    // 调用获取当前商品信息函数
    this.getCurrentGoods(this.$route.query.id);
    console.log(this.currentGoods);
    // 滚动
    this.$nextTick(() => {
      new BScroll(".goods-detail", {
        click: true,
      });
    });
  },
};
</script>

<style lang="less" scoped>
.detail {
  .goods-detail {
    height: calc(100vh - 8vh);
    overflow: hidden;
    position: relative;
    .detail-scroll {
      .pic {
        width: 100vw;
        height: 100vw;
        img {
          width: 100vw;
        }
        .van-icon {
          position: absolute;
          left: 3vw;
          top: 3vw;
          background-color: #515f6b;
          color: #fff;
          padding: 1vw 2vw;
          border-radius: 1vw;
        }
      }
      .goods-dsc {
        padding: 0 20px;
        box-sizing: border-box;

        .info {
          padding: 20px 0;
          box-sizing: border-box;
          h3 {
            font-size: 14px;
            margin-bottom: 6px;
          }
          p {
            color: #515f6b;
          }
        }
        .add-cart {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          .price {
            color: #e54226;
            font-size: 14px;
            font-weight: bolder;
          }
        }
      }
      .bgc-box {
        width: 100vw;
        height: 3vh;
        background-color: #f2f6f9;
      }
      .goods-intro {
        padding: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #bbb;
        border-top: 1px solid #bbb;
        h3 {
          font-size: 14px;
          font-weight: bolder;
          margin-bottom: 10px;
        }
        p {
          color: #515f6b;
        }
      }
      .msg-btn {
        padding: 20px;
        .van-button {
          margin-right: 10px;
        }
      }
      .has-con {
        padding: 20px;
        color: #515f6b;
        display: flex;
        border-bottom: 1px solid #bbb;
        .van-icon {
          // background-color: #f5a113;
          color: #fff;
          margin-right: 10px;
          border-radius: 50%;
        }
      }
      .user-msg {
        padding: 0 20px;
        .single-msg {
          padding: 20px 0;
          border-bottom: 1px solid #bbb;
          .user-info {
            display: flex;
            justify-content: space-between;
            color: #515f6b;
            .user {
              display: flex;
              align-items: center;
              span {
                margin-right: 10px;
              }
              img {
                width: 18px;
                height: 18px;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 8vh;
    background-color: #131d27;
    position: relative;
    z-index: 2999;
    .foo-left {
      z-index: 2999;
      .out-circle {
        width: 8vh;
        height: 8vh;
        background-color: #131d27;
        border-radius: 50%;
        position: absolute;
        left: 2vh;
        bottom: 1vh;
        z-index: 2999;
        .in-circle {
          width: 6vh;
          height: 6vh;
          background-color: #2b333e;
          border-radius: 50%;
          position: absolute;
          left: 1vh;
          top: 1vh;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2999;
        }
        .van-badge {
          position: absolute;
          top: 3px;
          right: 4px;
          z-index: 3000;
        }
      }
      .tip {
        margin-left: 12vh;
        line-height: 8vh;
        color: #b5b9c4;
        font-size: 14px;
        z-index: 2999;
        position: relative;
      }
    }
    .foo-right {
      width: 30vw;
      height: 8vh;
      line-height: 8vh;
      position: absolute;
      right: 0;
      bottom: 0;
      text-align: center;
      color: #b5b9c4;
      font-size: 14px;
      background-color: #2b343b;
      z-index: 2999;
    }
  }
  .van-popup--bottom {
    bottom: 8vh;
    .cart-top {
      display: flex;
      justify-content: space-between;
      background-color: #edeef2;
      color: #5f6368;
      padding: 15px;
      box-sizing: border-box;
    }
    .add-goods {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 15px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      h3 {
        width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        color: #ed4024;
        font-weight: bold;
      }
      /deep/.van-stepper--round .van-stepper__plus {
        background-color: #049edc;
      }
    }
  }
}
</style>